<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		
		<view class="profilePic">
			<image @click="chooseProfile" :src="profileURL" mode="scaleToFill" v-if="profileURL"></image>
			<image @click="chooseProfile" src="/static/img/headimg.png" mode="scaleToFill" v-if="!profileURL"></image><br>
			<span>点击更换头像</span>
		</view>
		<view class="info1">
			<span>基本信息（必填）</span>
			<view class="info">
				<view class="box">
					<span>姓名</span>
					<input type="text" v-model="name" placeholder="请输入真实姓名" class="input"
					placeholder-style="color: #99A3A3;font-size: 28rpx;">
				</view>
				<view class="box">
					<span>性别</span>
					<view class="" @click="getSex">
						<span :style="sex?'color:#001A18':''">{{sex?sex:'请选择性别'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					<uPicker :show="sexShow" :columns="[['男','女']]"
					@confirm="sexConfirm" @cancel="sexPickerClose">
					</uPicker>
				</view>
				<view class="box">
					<span>生日</span>
					<view class="" @click="getBirthday">
						<span :style="birthday?'color:#001A18':''">{{birthday?birthday:'请选择出生年月日'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					<uDatetimePicker
							:show="datePickerShow"
							v-model="now"
							mode="date"
							@confirm="dateConfirm"
							@cancel="datePickerClose"
							:minDate="252432000000"
					></uDatetimePicker>
					
				</view>
				<view class="box">
					<span>职业</span>
					<view class="" @click="getJob">
						<span :style="job?'color:#001A18':''">{{job?job:'请选择职业'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					<uPicker :show="jobShow" :columns="jobList"
					@confirm="jobConfirm" @cancel="jobPickerClose">
					</uPicker>
				</view>
				<view class="box">
					<span>手机</span>
					<input type="text" v-model="phoneNum" placeholder="请输入手机号码" class="input"
					placeholder-style="color: #99A3A3;font-size: 28rpx;">
					<view class="public">
						<uSwitch v-model="phonePublic" @change="phonePublicChange"
						size="12" activeColor="#08C8BD"></uSwitch>
						<view class="" :style="phonePublic?'color: #08C8BD;':'color:#99A3A3'">
							{{phonePublic?'公开':'不公开'}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="info1">
			<span>选填信息</span>
			<view class="info">
				<view class="box">
					<span>微信</span>
					<input type="text" v-model="wechatNum" placeholder="请输入微信" class="input"
					placeholder-style="color: #99A3A3;font-size: 28rpx;">
					<view class="public">
						<uSwitch v-model="wechatPublic"
						size="12" activeColor="#08C8BD"></uSwitch>
						<view class="" :style="wechatPublic?'color: #08C8BD;':'color:#99A3A3'">
							{{wechatPublic?'公开':'不公开'}}
						</view>
					</view>
				</view>
				<view class="box">
					<span>QQ</span>
					<input type="text" v-model="QQNum" placeholder="请输入QQ" class="input"
					placeholder-style="color: #99A3A3;font-size: 28rpx;">
					<view class="public">
						<uSwitch v-model="QQPublic" 
						size="12" activeColor="#08C8BD"></uSwitch>
						<view class="" :style="QQPublic?'color: #08C8BD;':'color:#99A3A3'">
							{{QQPublic?'公开':'不公开'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<button class="button" @click="toFinishResume2">下一步</button>
		
	</view>
</template>

<script>
	import uPicker from '@/subpageA/uview-ui/components/u-picker/u-picker.vue'
	import uDatetimePicker from '@/subpageA/uview-ui/components/u-datetime-picker/u-datetime-picker.vue'
	import uSwitch from '@/subpageA/uview-ui/components/u-switch/u-switch.vue'
	
	export default {
		data() {
			return {
				profileURL:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/61f7ddaa-5115-4928-bf99-12151c7fb59a.png",
				
				name:'',
				birthday:'',
				
				phoneNum:'',
				wechatNum:'',
				QQNum:'',
				phonePublic:false,
				wechatPublic:false,
				QQPublic:false,
				
				sex:'',			
				sexShow:false,
				
				datePickerShow:false,
				now:Number(new Date()),
				
				job:'',
				jobShow:false,
				jobList:[['教师','厨师','程序员']]
			};
		},
		components:{
			uPicker,
			uDatetimePicker,
			uSwitch
		},
		onLoad() {
			this.$store.dispatch('initDic').then(()=>{
				this.$http.request({
					url:'/user/resume',
					data:{
						
					}
				}).then(result=>{
					let res=result.data
					console.log(res);
					uni.setStorageSync('resumeInfo',res.data)
					this.name=res.data.name
					this.sex=res.data.gender
					this.birthday=res.data.birthday
					this.job=res.data.profType
					this.phoneNum=res.data.phone
					this.profileURL=res.data.portrait
					
				})
			})
		},
		methods:{
			//选择头像
			chooseProfile(){
				uni.chooseImage({
					count:1,
					sizeType:['original'],
					sourceType: ['album'],
					success:(res)=>{
						console.log(res);
						this.profileURL=res.tempFilePaths[0]
					}
				})
			},
			//手机号码是否公开
			phonePublicChange(e){
				console.log(e);
			},
			dateConfirm(date){
				//console.log(this.formatDate(date.value));
				this.birthday=this.formatDate(date.value).toString()
				this.datePickerShow=false;
			},
			datePickerClose(){
				this.datePickerShow=false
			},
			formatDate(time){
			    var date = new Date(time);
			 
			    var year = date.getFullYear(),
			        month = date.getMonth() + 1,//月份是从0开始的
			        day = date.getDate();
			    var newTime = year + '-' +
			                month + '-' +
			                day ;
			    return newTime;         
			},
			getBirthday(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this
				my.datePicker({
				  currentDate: this.formatDate(this.now),
				  startDate: '1900-1-1',
				  endDate: this.formatDate(this.now),
				  success: (res) => {
					that.birthday=res.date
				  },
				});
				// #endif
				
				//#ifndef MP-ALIPAY
				this.datePickerShow=true;
				//#endif
			},
			sexConfirm(val){
				this.sex=val.values[0][val.indexs[0]];
				this.sexShow=false;
			},
			sexPickerClose(){
				this.sexShow=false;
			},
			getSex(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this;
				my.optionsSelect({
				  title: "请选择您的学历",
				  optionsOne: ['男','女'],
				  success(res) {
					that.sex=res.selectedOneOption
				  }
				});
				//#endif
				//#ifndef MP-ALIPAY
				this.sexShow=true;
				//#endif
			},
			jobConfirm(val){
				this.job=val.values[0][val.indexs[0]];
				this.jobShow=false;
			},
			jobPickerClose(){
				this.jobShow=false;
			},
			getJob(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this;
				my.optionsSelect({
				  title: "请选择您的学历",
				  optionsOne: this.jobList[0],
				  success(res) {
					that.job=res.selectedOneOption
				  }
				});
				//#endif
				//#ifndef MP-ALIPAY
				this.jobShow=true;
				//#endif
			},
			//下一步
			toFinishResume2(){
				if(!this.name||!this.sex||!this.birthday||!this.job||!this.phoneNum){
					uni.showToast({
						title: '请完善必填项',
						duration: 1500,
						icon:"none"
					});
					//return
				}
				
				let resumeInfo=uni.getStorageSync('resumeInfo')
				
				let tempObj={
					portrait:this.profileURL,
					name:this.name,
					gender:this.sex,
					birthday:this.birthday,
					profType:this.job,
					phone:this.phoneNum,
					phonePub:this.phonePublic,
				}
				
				// uni.setStorageSync('portrait',this.profileURL)
				// uni.setStorageSync('name',this.name)
				// uni.setStorageSync('gender',this.sex)
				// uni.setStorageSync('birthday',this.birthday)
				// uni.setStorageSync('profType',this.job)
				// uni.setStorageSync('phone',this.phoneNum)
				// uni.setStorageSync('phonePub',this.phonePublic)
				if(this.wechatNum){
					Object.assign(tempObj,{
						wxNo:this.wechatNum,
						wxPub:this.wechatPublic
					})
					// uni.setStorageSync('wxNo',this.wechatNum)
					// uni.setStorageSync('wxPub',this.wechatPublic)
				}
				if(this.QQNum){
					Object.assign(tempObj,{
						qqNo:this.QQNum,
						qqPub:this.QQPublic
					})
					// uni.setStorageSync('qqNo',this.QQNum)
					// uni.setStorageSync('qqPub',this.QQPublic)
				}
				
				Object.assign(resumeInfo,tempObj)
				console.log(resumeInfo);
				
				uni.setStorageSync('resumeInfo',resumeInfo)
				uni.navigateTo({
					url:'./finishResume2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		
		.profilePic{
			margin: 40rpx;
			height: 160rpx;
			text-align: center;
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 8px;
			}
			span{
				display: inline-block;
				width: 160rpx;
				position: relative;
				bottom: 66rpx;
				border-radius: 0px 0px 8rpx 8rpx;
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: rgba(0,0,0,0.5000);
			}
		}
	
		.info1{
			width: 686rpx;
			margin: 32rpx;
			
			>span{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			.info{
				width: 100%;
				margin-top: 32rpx;
				padding: 20rpx 0;
				border-radius: 8px;
				background-color: #FFFFFF;
				
				.box{
					display: flex;
					
					align-items: center;
					margin-left: 32rpx;
					height: 72rpx;
					>span{
						width: 120rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #001A18;
					}
					view span{
						display: inline-block;
						width: 450rpx;
						margin-left: 32rpx;
						//#ifdef MP-ALIPAY
						margin-left: 48rpx;
						//#endif
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #99A3A3;
					}
					input{
						display: inline-block;
						width: 360rpx;
						margin: 32rpx;
					}
					.placeholderClass{
						font-size: 14px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #99A3A3;
					}
					view image{
						width: 16rpx;
						height: 30rpx;
					}
					.public{
						width: 100rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 10px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						
					}
				}
				
				
			}
		}
	
		.button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			color: #FFFFFF;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	
	}
</style>
